<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>爱心抽奖</title>
    <!--<link rel="stylesheet" type="text/css" href="/choujiang/css/public/reset.css">-->
    <link rel="stylesheet" type="text/css" href="/choujiang/css/public/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="/choujiang/css/public/function.css">
    <link rel="stylesheet" type="text/css" href="/choujiang/css/style.css">

    <script type="text/javascript" src="/choujiang/js/model/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/choujiang/js/model/jquery.SuperSlide.2.1.1.source.js"></script>
    <script type="text/javascript" src="/choujiang/js/model/html5.js"></script>
    <script type="text/javascript" src="/choujiang/js/public.js"></script>
    <script type="text/javascript" src="/choujiang/js/app.js"></script>
    <!-- 轮播图   -->
    <link rel="stylesheet" href="/choujiang/swiper/swiper.min.css"/>
    <script type="text/javascript" src="/choujiang/swiper/swiper.min.js"></script>
    <style type="text/css">
        .peolist {
            height: 100px;
            overflow: hidden;
            width: 100%;
        }

        .peolist li {
            float: left;
            width: 30%;
            height: 100%;
            padding-right: 2%;
        }

        .peolist li p {
            position: relative;
            width: 100%;
            height: 25px;
            line-height: 25px;
            top: -25px;
            background: #000000;
            font-weight: bold;
            filter: alpha(opacity=50);
            -moz-opacity: 0.38;
            opacity: 0.38;
            text-align: center;
        }

        .peolist li p span {
            color: #FFF;
            z-index: 1001;
        }

        .my-prize {
            width: 84%;
            overflow: hidden;
            position: absolute;
            background: url("/choujiang/images/information.png") no-repeat;
            background-size: contain;
            background-position: 50% 2%;
            top: 29%;
            padding: 13% 8%;
            height: 30%;

        }

        .info-del {
            width: 6%;
            top: 0;
            margin-left: 80%;
            position: absolute;
        }

        .info-content {
            width: 90%;
            margin-left: 5%;
            margin-top: 6%;
            padding-bottom: 2%;
            height: 100%;
            overflow-y: scroll;
        }

        .info-content table {
            width: 100%;
        }

        .info-content tr {
            border-bottom: 1px solid #eeeeee;
            text-align: center;
            line-height: normal
        }

        .info-content tr th {
            text-align: center;
            font-size: 15px;
            line-height: 3em;
            font-weight: bold;
            color: #4d4d4d;
        }

        .info-content tr td {
            font-size: 12px;
            line-height: 2.5em;
            color: #817f82
        }

        .swiper-slide .nub {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 99;
            width: 100%;
        }

        .swiper-slide span {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }

        .swiper-slide .back {
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }

    </style>
</head>
<body class="g-body-in">

<div class="g-wrap">
    <div class="h15"></div>
    <div class="main-sec">
        <a href="?act=choujiangDetail">
            <img src="/choujiang/images/role.png"
                 style="width: 40%;margin-left: 62%;margin-bottom: 4%;"/>
        </a>
    </div>
    <div class="main-sec pt5 main-wheel">
        <div class="big-border" id="big-border">
            <div class="small-border g9" id="small-border">
                {volist name="lucks" id="v"}
                <div class="shan">
                    <span>{$v.level}</span>
                    <img src="/choujiang/images/monery.png" width="30%">
                </div>
                {/volist}
                <img src="/choujiang/images/middle.png" width="50%" class="middle" id="middle">
            </div>
        </div>
        <img src="/choujiang/images/prize.png" onclick="show_prize()"
             style=" width: 90px; position: fixed;left: 72%;z-index: 1000;top: 53%;">
    </div>
    <div class="main-sec loptop" id="loptop">
        <div class="m-title"><img src="/choujiang/images/zhongjiang.png"
                                  style="width:50%;margin-left:25%;margin-top: -3%;"/></div>
        <dl class="peolist">
            {volist name="prizes" id="v"}
            <dd>
                <img src="{$v.img_src}" width="20%">
                <div class="right">
                    <span><h2>{$vo.nick_name}</h2><em></em></span>
                    <p>在{$v.luck_time} 中 {$v.level}</p>
                </div>
            </dd>
            {/volist}
        </dl>
    </div>
</div>

<div class="main-sec lopleft" style="background: #c72222;padding-bottom: 15px;">
    <div class="m-title">
        <img src="/choujiang/images/liebiao.png" style="width:50%;margin-left:25%;margin-top: -3%;"/>
    </div>
    <div class="swiper-container" id="swiper" style="height:75px;">
        <div class="swiper-wrapper">
            {volist name="goods" id="v"}
            <div class="swiper-slide blue-slide">
                <img src="{$v.prize_img}" style="height: 100%;width: 100%;">
                <div class="nub">
                    <span class="back"></span><span class="con"><span>{$v.level}</span></span>
                </div>
            </div>
            {/volist}
        </div>
    </div>
</div>

</div>
<div class="dialog info prize-information">
    <div class="my-prize">
        <img src="/choujiang/images/del.png" onclick="hideInformation(this)" class="info-del" alt="删除">
        <div class="info-content">
            <table id="info-list">
            </table>
        </div>
    </div>
</div>

<div class="dialog theForm c-theform" id="nozhongjiang">
    <div class="d-main">
        <p>很遗憾没有中奖，谢谢参与!</p>
        <div class="btn-w">
            <a class="btn bt_close" href="javascript:;" onclick="$(this).closest('.dialog').hide()">确定</a>
        </div>
    </div>
</div>
<div class="dialog again shwo_price" id="nojifen">
    <div class="d-main1 d-main">
        <p>亲！积分不够!</p>
        <div class="btn-w">
            <a class="btn bt_close" href="javascript:;" onclick="$(this).closest('.dialog').hide()">确定</a>
        </div>
    </div>
</div>

<div class="dialog again shwo_price" id="zhongjiang">
    <div class="d-main1 d-main">
        <p>恭喜您，您中了<span id="zhongjiang_name"></span></p>
        <div class="btn-w">
            <a class="btn bt_close" href="javascript:;" onclick="$(this).closest('.dialog').hide()">确定</a>
        </div>
    </div>
</div>

<div class="dialog is-login" id="dialog">
    <div class="d-main1 d-main">
        <p id="dialog_title"></p>
        <div class="btn-w">
            <a class="btn bt_close" href="javascript:;" onclick="$(this).closest('.dialog').hide()">确定</a>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    function hideInformation(e) {
        $('.prize-information').hide(400);
        $(".info-content").html();
    }
    $(".bt_close").click(function () {
        //location.reload();
        $(".c-theform").hide();
    });
    function show_prize(user_id) {
        if (user_id <= 0) {
            $(".is-login ").show();
            return false;
        }
        $.get('getMyPrize', function (content) {
            if (content) {
                var len = content.length;
                $('.prize-information').show(300);
                var str = '<tr><th width="20%">奖项</th><th width="40%">奖品</th><th>数量</th><th>状态</th></tr>';
                if (len > 0) {
                    for (var i = 0; i < len; i++) {
                        str += '<tr><td>' + content[i].level + '</td><td>' + content[i].prize + '</td><td>' + content[i].num + '</td><td>' + (content[i].status==1?'已发货':'待发货') + '</td></tr>';
                    }
                } else {
                    str += '<tr><td text-align="center" colspan="4">没有中奖纪录！</td></tr>';
                }
                $('#info-list').html(str);
            }
        },'json');

    }

    $("#loptop").slide({
        mainCell: "dl", autoPage: true, effect: 'topLoop', autoPlay: true,
        scroll: 1, vis: 3, easing: 'swing', delayTime: 1000, interTime: 2000, pnLoop: true
    });
    new Swiper('#swiper', {
        loop: true,
        autoplay: 2000,
        speed: 800,
        slidesPerView: 4,
        slidesPerGroup: 1,
        spaceBetween: 20
    });
    indexApp.init({
        'wheelBody': $('#big-border'), //转盘主体
        'wheelSmall': $('#small-border'), //转盘内部
        'starsNum': 16, //转盘边缘小黄点个数
        'starsPostion': [[50, 0.5], [70, 6], [84.5, 18], [92.5, 32], [95.5, 50], [91, 68], [81.5, 81.5], [68, 91], [50, 95.5], [32, 92.5], [16, 83], [6, 70], [0.5, 50], [3.5, 32], [14, 15], [27, 5.5]], //小圆点坐标
        'actionRan': 7200, //转盘转动弧度
        'theOnce': 0, //初始化转盘第一个
        'startBtn': $('#middle'), //开始按钮
        //需要后台传值的参数
        'clickAjaxUrl': "{:U('startGame2')}", //点击抽奖获取信息的交互的ajax
        'is_gz': 1, //是否开启关注 1开 2 关
        'is_follow': 1 //是否关注
    }).wheelStart(); //应用开始
</script>
</html>